<template>
	<view class="wrap">

		<view class="header">
			<view class="header-inner">
				<view class="back-png" @click="backPage">
					<image class="header-image" src="@/static/images/arrow-left.svg" mode="aspectFill"></image>
				</view>
				<view class="title">
					箱架号{{id?"编辑":"添加"}}
				</view>
				<view class="scan-png" @click="saomaruku">
					<image class="header-image" src="@/static/images/saoma.svg" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="xiangzihao">
			<view class="left">
				箱架号
			</view>
			<view class="right">
				<u--input v-model="tankRackName" placeholder="请输入箱架号" :customStyle="{'height':'100rpx'}" color="#3460F9"
					inputAlign="right" border="false" clearable></u--input>
				<!-- GLD20221223-A001 -->
			</view>
		</view>

		<!-- 扫码动态生成 -->
		<view v-if="scanCodeList.length>0">

			<view class="xiangziitem" v-for="(scanItem,index) in scanCodeList" :key="index">

				<uni-swipe-action class="cell-item">
					<!-- 基础用法 -->
					<uni-swipe-action-item :right-options="shippingMarkOptions"
						@click="shippingMarkClick($event,scanItem)">
						<view class="xiangzi-line">
							<view class="line-label">
								唛头号
							</view>
							<view class="line-value">
								{{scanItem.code}}
							</view>

						</view>
						<view class="xiangzi-line">
							<view class="line-label">
								合同号
							</view>
							<view class="line-value">
								{{scanItem.contractNo}}
							</view>
						</view>
						<view class="xiangzi-line">
							<view class="line-label">
								供应商名称
							</view>
							<view class="line-value">
								{{scanItem.supplier}}
							</view>
						</view>



					</uni-swipe-action-item>
				</uni-swipe-action>



				<!-- 		<view class="title">
				x级箱单号
			</view> -->
				<!-- <view class="xiangzi-code">
				{{scanItem.code}}
			</view> -->
				<!-- 		<view class="xiangzi-shuxing">
					<view class="shuxing">
						<view class="name">
							件数
						</view>
						<view class="value">
							12木箱
						</view>
					</view>	
					<view class="shuxing">
						<view class="name">
							体积
						</view>
						<view class="value">
							17.08M3
						</view>
					</view>	
					<view class="shuxing">
						<view class="name">
							总毛重
						</view>
						<view class="value">
							6202.00Kg
						</view>
					</view>	
				</view> -->
			</view>
		</view>

		<view style="margin-top: 50rpx" v-else>
			<no-Data size="small" src="/static/images/empty.svg" desc="扫码入库~"></no-Data>
		</view>

		<view class="picture-title">
			照片上传
		</view>

		<view class="upload-wrap">
			<view class="unit-pic" @click="previewImage(index)" v-for="(item, index) in fileList" :key="index">
				<image class="item-image" :src="item.url" mode="aspectFill"></image>
				<view @click.stop="itemCheck(item)" :class="['checkbox-unit',item.checked?'checked':'']"></view>
				<image @click.stop="itemCheck(item)" :class="['fi-br-check',item.checked?'checked':'']"
					src="@/static/images/fi-br-check.svg" mode="aspectFill"></image>
				<!-- 	<view class="u-delete-icon" @click="itemCheck(item)">
					<u-icon name="close" size="20" color="#ffffff"></u-icon>
				</view> -->

			</view>

			<view class="up-btn">
				<u-upload :custom-btn="true" :show-upload-list="showUploadList" @afterRead="afterRead" name="1" multiple
					:maxCount="25" :auto-upload="false">
					<image class="upload-add" src="@/static/images/upload-add.svg"></image>
				</u-upload>
			</view>

		</view>

		<view class="confirm-submit">
			<u-row customStyle="margin-bottom: 10px;display:flex;justify-content: space-between;padding:0px 15px;">
				<template v-if="isMangerImg">
					<u-col span="5.8">
						<u-button style="border-radius: 12px;background: #3461FD;color: white;" text="取消"
							@click="cancelAll"></u-button>
					</u-col>
					<u-col span="5.8">
						<u-button style="border-radius: 12px;" text="删除" @click="deleteItem"></u-button>
					</u-col>
				</template>

				<template v-else>
					<u-col span="12">
						<u-button style="border-radius: 12px;background: #3461FD;color: white;" text="确定上传"
							@click="submit"></u-button>
					</u-col>
				</template>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		scanCode
	} from "@/mixin/scan-code/scan-code.js";
	// 引入封装的 sqlite
	import DB from "@/utils/sqlite.js";
	import {
		isShippingMark,
		alreadyExistTankRack,
		shippingInTankRack
	} from "@/utils/tools.js"

	export default {
		mixins: [scanCode], //混入文件
		data: function() {
			return {
				id: "",
				tankRackName: "",
				shippingMarkOptions: [{
					text: '删除',
					style: {
						width: "30px",
						backgroundColor: 'white',
						color: 'red',
						fontSize: '13px'
					}
				}],
				scanCodeStr: "MM111;23BJ-0002-01-T;供应商企业",
				// {
				// 	code: "MM111",
				// 	contractNo: "23BJ-0002-01-T",
				// 	supplier: "供应商企业",
				// }
				scanCodeList: [],
				showUploadList: false,
				uUpload: {}, // 组件实例
				// https://5b0988e595225.cdn.sohucs.com/images/20190124/60e5c9d2286549d1b4bbaaba17cb6e31.jpeg
				// {
				// 	url: '',
				// 	checked:true,
				// 	// status: 'uploading',
				// },
				fileList: [],
			}
		},
		onReady() {
			// 得到整个组件对象，内部图片列表变量为"lists"
			this.uUpload = this.$refs.uUpload;
		},
		onLoad: function(option) {

			// DB.dropTable('tank_rack')

			console.log('option.id', option.id);
			this.id = option.id;
			if (this.id) {
				this.getDataById(this.id);
			}
		},
		onShow: function() {
			let _this = this;
			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scancodedate', function(data) {
				// 不是唛头号码
				if (!isShippingMark(data.code)) {
					//箱架号
					_this.tankRackName = data.code;
					alreadyExistTankRack(data.code).then(r => {
						if (r && r.name) {
							_this.id = r.id
							_this.dataEcho(r)
						}
					})
					return false;
				}
				let newScan = {};
				let splitArr = data.code.split(";")
				if (splitArr.length !== 3) {
					_this.$modal.msgError('唛头格式不正确');
				}
				newScan['code'] = splitArr[0]; //唛头号
				newScan['contractNo'] = splitArr[1]; //合同号
				newScan['supplier'] = splitArr[2]; //供应商
				let has_code = _this.scanCodeList.find(item => {
					return item.code == newScan['code']
				})
				if (has_code) {
					uni.showToast({
						icon: "none",
						title: "不可重复添加唛头",
						mask: true
					});
					return false;
				}
				_this.scanCodeList.push(newScan)
				console.log('你想要的code：', data.code)
			})
		},
		computed: {
			isMangerImg() {
				return this.fileList.some(item => {
					return item.checked == true;
				})
			}
		},
		methods: {
			getDataById(id) {
				let open = DB.isOpen();
				if (open) {
					// 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
					DB.selectTableData("tank_rack", "id", id)
						.then(res => {
							console.log('res', res)
							if (res && res.length != 0 && res[0]) {
								this.dataEcho(res[0])
							}
						})
						.catch(error => {
							console.log("查询失败", error);
						});
				} else {
					this.$modal.msg("数据库未打开")
				}
			},
			dataEcho(data) {
				if (data) {
					try {
						this.scanCodeList = [];
						this.fileList = JSON.parse(data.content);
						this.tankRackName = data.name;
						let marksNoSet = JSON.parse(data.marksNoSet);
						let scanCodeMap = JSON.parse(data.scanCodeMap);
						for (var i = 0; i < marksNoSet.length; i++) {
							this.scanCodeList.push({
								code: marksNoSet[i],
								contractNo: scanCodeMap[marksNoSet[i]].contractNo,
								supplier: scanCodeMap[marksNoSet[i]].supplier,
							})
						}
					} catch (e) {
						console.log("回显失败")
					}

				}
			},
			deleteItem() {
				let list = this.fileList.filter(item => {
					return !item.checked
				})
				this.fileList = list
			},
			cancelAll() {
				for (var i = 0; i < this.fileList.length; i++) {
					let item = this.fileList[i];
					this.$set(this.fileList[i], "checked", false)
				}
			},
			itemCheck(item) {
				var check = item.checked
				this.$set(item, 'checked', !check)
			},
			// 时间戳转年月日
			formatDate(data) {
				let now = new Date(data);
				var year = now.getFullYear(); //取得4位数的年份
				var month =
					now.getMonth() + 1 < 10 ?
					"0" + (now.getMonth() + 1) :
					now.getMonth() + 1;
				var date = now.getDate() < 10 ? "0" + now.getDate() : now.getDate();
				var hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
				var minute =
					now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
				var second =
					now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
				return (
					year +
					"-" +
					month +
					"-" +
					date +
					" " +
					hour +
					":" +
					minute +
					":" +
					second
				);
			},
			// 新增表数据
			insertTableData() {
				let open = DB.isOpen();
				if (open) {
					let time = this.formatDate(new Date().getTime());
					let content = JSON.stringify(this.fileList)
					let scanCodeList = [];
					let scanCodeMap = {};
					for (var i = 0; i < this.scanCodeList.length; i++) {
						scanCodeList.push(this.scanCodeList[i].code)
						scanCodeMap[this.scanCodeList[i].code] = this.scanCodeList[i]
					}

					// 新增是将唛头直接插入表中
					for (let i = 0; i < scanCodeList.length; i++) {
						let shipping_mark_sql = `'${scanCodeList[i]}','${ this.tankRackName }'`
						let shipping_mark_condition = "'shipping_no','tank_rack_name'";
						DB.insertTableData("shipping_mark", shipping_mark_sql, shipping_mark_condition)
							.then(res => {
								this.$modal.msgSuccess('新增成功')
							})
							.catch(error => {
								console.log("失败", error);
							});
					}


					let marksNoSet = JSON.stringify(scanCodeList)
					scanCodeMap = JSON.stringify(scanCodeMap)
					let sql =
						`'${this.tankRackName}','${ content }' , '${ marksNoSet }' ,'${ scanCodeMap }' ,'等待上传','${time}'`;
					let condition = "'name','content','marksNoSet','scanCodeMap', 'type','time'";
					// 新增 DB.insertTableData(表名, 对应表头列的数据)
					console.log("condition", condition)
					console.log("sql", condition)
					DB.insertTableData("tank_rack", sql, condition)
						.then(res => {
							console.log('res', res)
							this.$modal.msgSuccess('新增成功')
						})
						.catch(error => {
							console.log("失败", error);
						});



				} else {
					this.$modal.msg("数据库未打开");
				}
			},
			// 编辑表数据
			updateTableData() {
				let open = DB.isOpen();
				if (open) {
					let time = this.formatDate(new Date().getTime());
					let content = JSON.stringify(this.fileList)
					let scanCodeList = [];
					let scanCodeMap = {};
					for (var i = 0; i < this.scanCodeList.length; i++) {
						scanCodeList.push(this.scanCodeList[i].code)
						scanCodeMap[this.scanCodeList[i].code] = this.scanCodeList[i]
					}


					//清空该箱架原先绑定的唛头
					DB.deleteTableData("shipping_mark", "tank_rack_name", this.tankRackName).then(res => {

						// 新增是将唛头直接插入表中
						for (let i = 0; i < scanCodeList.length; i++) {
							let shipping_mark_sql = `'${scanCodeList[i]}','${ this.tankRackName }'`
							let shipping_mark_condition = "'shipping_no','tank_rack_name'";
							DB.insertTableData("shipping_mark", shipping_mark_sql, shipping_mark_condition)
								.then(res => {
									this.$modal.msgSuccess('新增成功')
								})
								.catch(error => {
									console.log("失败", error);
								});
						}

						let marksNoSet = JSON.stringify(scanCodeList)
						scanCodeMap = JSON.stringify(scanCodeMap)
						let data =
							`name = '${this.tankRackName}',marksNoSet = '${marksNoSet}',scanCodeMap = '${scanCodeMap}',content = '${content}',time = '${time}'`;
						DB.updateTableData("tank_rack", data, "id", this.id)
							.then(res => {
								this.$modal.msg("更新成功")
							})
							.catch(error => {
								console.log("修改失败", error);
							});


					}).catch(err => {

					})

				}
			},
			saomaruku() {
				let _this = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log(res)
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// 不是唛头号码
						if (!isShippingMark(res.result)) {
							_this.tankRackName = res.result;
							alreadyExistTankRack(res.result).then(r => {
								if (r && r) {
									_this.id = r.id
									_this.dataEcho(r)
								}
							})
							return false;
						}
						let splitArr = res.result.split(";")
						if (splitArr.length !== 3) {
							_this.$modal.msgError('唛头格式不正确');
						}
						newScan['code'] = splitArr[0]; //唛头号
						newScan['contractNo'] = splitArr[1]; //合同号
						newScan['supplier'] = splitArr[2]; //供应商
						let has_code = _this.scanCodeList.find(item => {
							return item.code == newScan['code']
						})
						if (has_code) {
							uni.showToast({
								icon: "none",
								title: "不可重复添加唛头",
								mask: true
							});
							return false;
						}

						_this.scanCodeList.push(newScan)
					}
				});
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			async submit() {
				let _this = this;
				console.log('fileList', JSON.stringify(this.fileList))
				if (!this.tankRackName) {
					this.$modal.msgError('箱架号必填');
					return false;
				}
				if (!this.scanCodeList.length) {
					this.$modal.msgError('唛头不能为空');
					return false;
				}
				if (!this.fileList.length) {
					this.$modal.msgError('图片不能为空');
					return false;
				}

				// const promiseList = []
				// this.scanCodeList.map(shipping => {
				// 	promiseList.push(shippingInTankRack(shipping.code))
				// })

				// if (!_this.id) {
				// 	_this.insertTableData();
				// 	_this.backPage();
				// } else {
				// 	_this.updateTableData()
				// 	_this.backPage();
				// }

				const promiseList = [];
				this.scanCodeList.map(shipping => {
					promiseList.push(shippingInTankRack(shipping.code, this.tankRackName))
				})

				Promise.all(promiseList).then((result) => {
					console.log('this.tankRackName', this.tankRackName)
					console.log('result', result)
					let sc = result.some(p => {
						return p == true;
					})
					console.log('scscsc', sc)
					if (sc) {
						// this.$modal.msgError('唛头已绑定');
						return false;
					}
					if (!_this.id) {
						_this.insertTableData();
						_this.backPage();
					} else {
						_this.updateTableData()
						_this.backPage();
					}

				}).catch((error) => {
					console.log(error); // 任一Promise失败时输出失败的Promise结果
				})



			},
			//移动图片到指定文件夹
			copyFileToDirectory(oldPath, newDirectory) {
				const filename = Date.now() + '.jpg'
				return new Promise((resolve, reject) => {
					plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
						// fs.root是根目录操作对象DirectoryEntry  
						fs.root.getDirectory(newDirectory, {
							create: true
						}, function(entry1) {
							console.log('新目录----' + entry1.fullPath);
							plus.io.resolveLocalFileSystemURL(oldPath,
								function(entry2) {
									console.log('旧文件---' + entry2.fullPath);
									entry2.copyTo(entry1, filename,
										function(res) {
											console.log('移动成功', res.fullPath);
											resolve('file://' + res.fullPath)
										},
										function(e) {
											console.log('内层移动失败' + JSON.stringify(e))
											reject('内层移动失败' + JSON.stringify(e))
										})
								},
								function(e) {
									console.log('移动失败' + JSON.stringify(e))
									reject('移动失败' + JSON.stringify(e))
								})
						}, e => {
							console.log('外层操作失败' + JSON.stringify(e))
							reject('外层操作失败' + JSON.stringify(e))
						});
					})
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			}, // 新增图片
			async afterRead(event) {
				// file:///storage/emulated/0/DCIM/Camera/
				console.log('event.name', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log('lists', lists)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const oldPath = lists[i].url
					const newLocalDirectory = 'file:///storage/emulated/0/DCIM/HUAYOU/12345/'
					let newLocalPath = await this.copyFileToDirectory(oldPath, newLocalDirectory)
					console.log('newLocalPath', newLocalPath)
					const result = await this.uploadFilePromise(newLocalPath)
					// uni.saveImageToPhotosAlbum({
					// 			filePath: lists[i].url,
					// 			success: function (res) {
					// 				console.log('save success',res);
					// 			}
					// 		});
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					resolve(url)
				})
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.fileList.map(item => item.url), // 图片列表
					current: index, // 当前显示图片的索引
					indicator: 'number' // 图片指示器样式，默认为圆点
				})
			},
			shippingMarkClick(e, item) {
				if (e.content.text == '删除') {
					let shippingMarkIndex = this.scanCodeList.findIndex(item => {
						return item.code == item.code
					})
					this.$delete(this.scanCodeList, shippingMarkIndex)
					this.$modal.msgSuccess('移除成功')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: calc(100vh);
		padding-top: 270rpx;
		overflow-y: scroll;
		background: var(--additional-colors-white, #FFF);
		padding-bottom: 100rpx;
	}

	.header {
		width: 100%;
		height: 270rpx;
		flex-shrink: 0;
		border-radius: 0px 0px 60rpx 60rpx;
		background: #3461FD;
		position: fixed;
		top: 0;
		z-index: 999;
		padding-top: 120rpx;

		.header-inner {
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
			align-items: center;

			.title {
				color: #FFF;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 800;
				line-height: 52rpx;
				letter-spacing: 0.09px;
			}

			.back-png {
				width: 100rpx;
				height: 100rpx;
				// padding: 24px;
				border-radius: 12px;
				text-align: center;
				line-height: 48rpx;
				background-image: url("@/static/images/back-bg.svg");
				background-size: 100rpx 100rpx;
				background-repeat: no-repeat;
				display: flex;
				justify-content: center;
				align-items: center;

				.header-image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.scan-png {
				width: 48rpx;
				height: 48rpx;
				border-radius: 24rpx;
				text-align: center;
				line-height: 48rpx;

				.header-image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.xiangzihao {
		width: calc(100vw - 40rpx);
		height: 50px;
		line-height: 100rpx;
		border-radius: 20rpx;
		background: #FFF;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.10);
		margin: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;

		.left {
			color: var(--gray-3, #828282);
			text-align: left;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			line-height: inherit;
			width: 240rpx;
			flex-shrink: 0;
		}

		.right {
			color: #1278FF;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			line-height: inherit;
		}
	}

	.xiangziitem {
		width: calc(100vw - 40rpx);
		min-height: 100rpx;
		flex-shrink: 0;
		border-radius: 16px;
		background: #FFF;
		box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;

		.title {
			color: var(--tetriary-text, #9895AB);
			font-size: 20rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 400;
			line-height: 48rpx;
			letter-spacing: 0.333px;
		}

		.xiangzi-line {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
			letter-spacing: 0.333px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 70rpx;
			padding: 0 10rpx;

			.line-label {
				color: #9895AB;
				font-family: PingFang SC;
				font-size: 20rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 56rpx;
				/* 177.493% */
				letter-spacing: 0.333px;
			}

			.line-value {
				color: #120B3C;
				text-align: right;
				font-family: PingFang SC;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 56rpx;
				letter-spacing: 0.333px;
			}
		}
	}

	.xiangzi-shuxing {
		display: flex;
		padding-top: 40rpx;

		.shuxing {
			flex: 33.3%;

			.name {
				color: var(--tetriary-text, #9895AB);
				font-size: 10px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 400;
				line-height: 40rpx;
				letter-spacing: 0.333px;
				margin-bottom: 8px;
			}

			.value {
				color: #3461FD;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 400;
				line-height: 40rpx;
				letter-spacing: 0.333px;
			}
		}
	}

	.picture-title {
		color: #000;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
		line-height: 56rpx;
		padding: 16rpx 20rpx;
	}

	.upload-wrap {
		display: flex;
		flex-wrap: wrap;
		padding: 5px 15px;
		margin-bottom: 100rpx;

		.unit-pic {
			flex: 31.3%;
			margin: 5rpx;
			height: 288rpx;
			flex-grow: 0;
			// flex-shrink: 0;
			border-radius: 16px;
			background: url(<path-to-image>), lightgray 50% / cover no-repeat;
			box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
			overflow: hidden;
			position: relative;

			.item-image {
				width: 100%;
				height: 100%;
			}
		}

		.up-btn {
			flex: 30%;
			margin: 10rpx;
			height: 288rpx;
			flex-grow: 0;
			box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
			border-radius: 32rpx;
			border: 1px dashed #3461FD;
			background: #FFF;
			text-align: center;
			display: flex;
			justify-content: center;
			overflow: hidden;

			/deep/ .u-upload__wrap {
				justify-content: center;
				align-content: center;
			}

			.upload-add {
				width: 160rpx;
				height: 160rpx;
				// margin: 100rpx auto;
			}

			/deep/ .u-upload__wrap>uni-view {
				display: flex;
				align-items: center;
			}
		}
	}

	.u-upload__wrap {
		/deep/ &>uni-view {
			width: 100%;
		}
	}

	// calc(50px + env(safe-area-inset-bottom))
	.confirm-submit {
		position: fixed;
		bottom: 0px;
		padding: 20rpx;
		width: 100%;
	}

	.checkbox-unit {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid white;
		position: absolute;
		right: 15rpx;
		bottom: 15rpx;
		border-radius: 5rpx;
	}

	.checkbox-unit.checked {
		background-color: blue;
	}

	.fi-br-check.checked {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		right: 18rpx;
		bottom: 18rpx;
		border-radius: 3rpx;
		padding: 4rpx;
	}
</style>